import "react-native-gesture-handler";

import { Dimensions, Pressable, ScrollView, Text, View } from "react-native";
import { Link, Tabs } from "expo-router";

import Colors from "@/constants/Colors";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import { NavigationContainer } from "@react-navigation/native";
import React from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { useClientOnlyValue } from "@/components/useClientOnlyValue";
import { useColorScheme } from "@/components/useColorScheme";

// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
function TabBarIcon(props: {
  name: React.ComponentProps<typeof FontAwesome>["name"];
  color: string;
}) {
  return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
}

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const windowWidth = Dimensions.get("window").width;
  const maxTabsPerScreen = 7;
  const tabWidth = windowWidth / maxTabsPerScreen;

  return (
    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
      <View style={{ flexDirection: "row", width: tabWidth * 7 }}>
        {/* Adjust width based on the number of tabs */}
        <Tabs
          screenOptions={{
            tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
            // Disable the static render of the header on web
            // to prevent a hydration error in React Navigation v6.
            headerShown: useClientOnlyValue(false, true),
            tabBarScrollEnabled: true,
            tabBarItemStyle: { width: tabWidth },
            tabBarStyle: { overflow: "hidden" },
          }}
        >
          <Tabs.Screen
            name="index"
            options={{
              title: "Tab One111",
              tabBarIcon: ({ color }) => (
                <TabBarIcon name="code" color={color} />
              ),
              headerLeft: () => (
                <View style={{ marginRight: 15 }}>
                  <Link href="/testnavigate" asChild>
                    <Text>testnavigate</Text>
                  </Link>
                </View>
              ),
              headerRight: () => (
                <Link href="/modal" asChild>
                  <Pressable>
                    {({ pressed }) => (
                      <FontAwesome
                        name="info-circle"
                        size={25}
                        color={Colors[colorScheme ?? "light"].text}
                        style={{
                          marginRight: 15,
                          opacity: pressed ? 0.5 : 1,
                        }}
                      />
                    )}
                  </Pressable>
                </Link>
              ),
            }}
          />
          <Tabs.Screen
            name="three"
            options={{
              title: "WebviewBaidu",
              tabBarIcon: ({ color }) => (
                <TabBarIcon name="code" color={color} />
              ),
            }}
          />
          <Tabs.Screen
            name="five"
            options={{
              title: "音频管理器",
              tabBarIcon: ({ color }) => (
                <TabBarIcon name="code" color={color} />
              ),
            }}
          />
          <Tabs.Screen
            name="seven"
            options={{
              title: "录音机播放器",
              tabBarIcon: ({ color }) => (
                <TabBarIcon name="code" color={color} />
              ),
            }}
          />
          <Tabs.Screen
            name="eight"
            options={{
              title: "sqlite",
              tabBarIcon: ({ color }) => (
                <TabBarIcon name="code" color={color} />
              ),
            }}
          />

          <Tabs.Screen
            name="ten"
            options={{
              title: "wallpaper",
              tabBarIcon: ({ color }) => (
                <TabBarIcon name="code" color={color} />
              ),
            }}
          />
          <Tabs.Screen
            name="login"
            options={{
              title: "login",
              tabBarIcon: ({ color }) => (
                <TabBarIcon name="code" color={color} />
              ),
            }}
          />
        </Tabs>
      </View>
    </ScrollView>
  );
}
